<template>
	<view>
		
			<u-modal  :show-cancel-button="false" :showConfirmButton="false" v-model="isShow" ref="uModal"
				:async-close="true" :show-title="false">
				<view class="slot-content">
					<view class="pL15 pR15 pT15 pB15">
						<view class="t-center font20 bold">{{title}}</view>
						<view class="t-center mT10 font15">
						   <block v-if="slotHtml">
							<rich-text :nodes="slotHtml"></rich-text>
							<!-- <u-parse :html="slotHtml"></u-parse> -->
							   
						   </block>
						   <block v-else>
							   {{content}}
						   </block>
						</view>
						<block v-if="showCancel">
							<view class="flex alg-center">
								<view @click="close()" class="btnCacel mR10 w50">
									取消
								</view>
								<view class="btnTip pointer w50 mL10" :style="`background:${bgColor}`" @click="confirmBtn">
									{{btnText}}
								</view>
							</view>
						</block>
						<block v-else>
							<view class="btnTip pointer" :style="`background:${bgColor}`" @click="confirmBtn">
								{{btnText}}
							</view>
						</block>
		
					</view>
				</view>
			</u-modal>
		
		
	</view>
</template>

<script>

	export default {
		emits: ["confirm", "cancel"],
		props: {
			title: {
				type: String,
				default: "温馨提示"
			},
			content: {
				type: String,
				default: "确认该操作吗"
			}
		},
		data() {
			return {
				isShow: false,
				title: "温馨提示",
				content: "确认该操作吗？",
				bgColor: "#386AFF",
				btnText: "确定",
				confirm: 'confirm',
				showCancel: false,
				slotHtml:''
			}
		},
		methods: {
			close() {
				this.isShow = false;
				let that=this;
				this.$nextTick(()=>{
					uni.$u.throttle(that.closeFunc)
				})
			},
			confirmBtn(func) {
				this.isShow = false;
				let that=this;
				this.$nextTick(()=>{
					uni.$u.throttle(that.successFunc)
				})
				
				
			},
			open(obj) {
				this.isShow = true;
				if (obj) {
				
					this.content = obj.content ? obj.content : "确认该操作吗?";
					this.title = obj.title ? obj.title : "温馨提示"
					this.bgColor = obj.bgColor ? obj.bgColor : '#386AFF';
					this.btnText = obj.btnText ? obj.btnText : "确定";
					this.showCancel = obj.showCancel ? obj.showCancel : false;
					this.slotHtml=obj.slotHtml?obj.slotHtml:'';
					if (obj.success) {
						this.successFunc = obj.success;
					}else{
						this.successFunc=()=>{console.log('关闭')}
					}
					if(obj.close){
						this.closeFunc=obj.close;
					}else{
						this.closeFunc=()=>{console.log('关闭')}
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.btnTip {
		font-size: 32rpx;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 20rpx;
		color: #fff;
		margin-top: 30rpx;
	}
	.btnCacel{
		font-size: 32rpx;
		text-align: center;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 20rpx;
		color: #333;
		margin-top: 30rpx;
        border: 2rpx solid #dedede;	
	}
</style>